<template>
  <div style="height: calc(100vh - 8px - 7rem);width: 100%;">
    <div class="indicator">
      <div class="indicator-title">
        <span>周期性数据统计</span>
      </div>
      <div class="indicator-month">
        <el-date-picker
          v-model="month[0]"
          type="month" class="month"
          placeholder="开始月">
        </el-date-picker>
        ~
        <el-date-picker
          v-model="month[1]"
          type="month" class="month"
          placeholder="结束月">
        </el-date-picker>
        <el-button @click="selTime">查询</el-button>
      </div>

      <!--取水量 制水量-->
      <div class="indicator-main dash-box">
        <div v-for="(item,index) in indicator" :key="index">
          <div class="title">
            {{ item.title }}
          </div>
          <ul class="main">
            <li v-for="(it,i) in item.data" :key="i">
              <div class="label">
                {{ it.label }}
              </div>
              <div :class="'value value-'+i">
                {{ it.value }}
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="quality dash-box">
      <div class="quality-title">
        水质达标汇总
      </div>
      <div class="quality-main">
        <el-scrollbar style="height: 100%;">
          <el-table
            :data="tableData"
            style="width: 100%;">
            <el-table-column
              prop="date"
              label="类别"
              width="130px">
            </el-table-column>
            <el-table-column label="本月水质">
              <el-table-column
                prop="npass"
                label="合格">
              </el-table-column>
              <el-table-column
                prop="nnpass"
                label="不合格">
              </el-table-column>
            </el-table-column>
            <el-table-column label="本年水质">
              <el-table-column
                prop="ypass"
                label="合格">
              </el-table-column>
              <el-table-column
                prop="ynpass"
                label="不合格">
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </div>

    </div>

    <ul class="marketing dash-box">
      <li class="marketing-item">
        <div class="left">
          <bottom-dashboard style="height: 100%;" :data="bottomList[0]"/>
        </div>
        <div  class="right">
          <div style="line-height: 2;font-size: 1.2rem;">产销差</div>
          <div>本月: <span style="color: #dd3d2f;font-size: 20px;">28.11</span>万m³</div>
          <div>本年: <span style="color: #5e9e81;font-size: 20px;">55.12</span>万m³</div>
        </div>
      </li>
      <li class="marketing-item">
        <div class="left">
          <bottom-dashboard style="height: 100%;" :data="bottomList[1]"/>
        </div>
        <div class="right">
          <div style="line-height: 2;font-size: 1.2rem;">单位制水成本</div>
          <div>本月:<span style="color: #dd3d2f;font-size: 20px;display:inline-block;width: 30px;text-align: right">?</span>（元）</div>
          <div>本年:<span style="color: #5e9e81;font-size: 20px;display:inline-block;width: 30px;text-align: right">?</span>（元）</div>
        </div>
      </li>
    </ul>
    <div class="map">
      <ul class="topList">
        <li>管网总长度:<span>161.59km</span></li>
        <li>服务总人口:<span>29.4万人</span></li>
        <li>供水总面积:<span>62.2km²</span></li>
      </ul>
      <div class="list" style="top: 10%;left: 5%;">
        <div class="title">北郊水厂供水区</div>
        <div>本期供水量:<span>140478</span>m³</div>
        <div>上期供水量:<span>152767</span>m³</div>
        <div style="margin-top: .25rem;">压力最低值:<span>0.21</span>Mpa</div>
        <div class="color" style="margin-top: .25rem;">管网总长度:<span>29.79</span>km</div>
        <div class="color">服务总人口:<span>5.4</span>万人</div>
        <div class="color">供水总面积:<span>7.75</span>km²</div>
        <i class="l t"></i><i class="l b"></i><i class="r t"></i><i class="r b"></i>
        <b class="l t"></b><b class="l b"></b><b class="r t"></b><b class="r b"></b>
      </div>
      <div class="list" style="bottom: 10%;right: 5%;">
        <div class="title title-2">东郊水厂供水区</div>
        <div>本期供水量:<span>1248366</span>m³</div>
        <div>上期供水量:<span>1256449</span>m³</div>
        <div style="margin-top: .25rem;">压力最低值:<span>0.14</span>Mpa</div>
        <div class="color" style="margin-top: .25rem;">管网总长度:<span>131.8</span>km</div>
        <div class="color">服务总人口:<span>24</span>万人</div>
        <div class="color">供水总面积:<span>54.45</span>km²</div>
        <i class="l t"></i><i class="l b"></i><i class="r t"></i><i class="r b"></i>
        <b class="l t"></b><b class="l b"></b><b class="r t"></b><b class="r b"></b>
      </div>
    </div>
    <!--   <div class="home-echarts-bar">
     <div class="dash-box" @click="show('open',0)">
       <i v-if="isShow.st0" class="el-icon-circle-close-outline" @click.stop="show('close',0)"></i>
       <div class="mask" @click.stop="show('close',0)"></div>
       <div class="title">{{ echartsList[0].title }}</div>
       <div class="echart">
         <div class="echart-inner">
           <echarts :data="echartsList[0].data" class="echarts-item"></echarts>
         </div>
       </div>
     </div>
   </div>-->
    <div class="home-echarts-bar-box">
      <el-scrollbar style="height: 100%">
        <div v-for="(item,index) in echartsList" :key="index" class="home-echarts-bar" :style="'z-index:' + (isShow[index]?3:0) ">
          <div :class="{'on':isShow[index]}" @click="show('open',index)" class="dash-box">
            <i v-if="isShow[index]" class="el-icon-circle-close-outline" @click.stop="show('close',index)"></i>
            <div class="mask" @click.stop="show('close',index)"></div>
            <div class="title">{{ item.title }}</div>
            <div class="echart">
              <div class="echart-inner">
                <echarts :data="item.data" class="echarts-item"></echarts>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
  import Echarts from '@/components/echarts/index'
  import bottomDashboard from './components/bottomDashboard'
  import { overview, overview2 } from '@/api/dashboard'  // 不同模块的api 分开放，
  export default {
    name: 'Dashboard',
    components: {
      Echarts,
      bottomDashboard
    },
    mounted() {
      const that = this
      overview({}).then(res=>{
          console.log(res + "1111")
          var resultData = res.data.adsKpiAlls;
          console.log(resultData)
          // 处理拿到的数据
          var newArray = [];
          if(resultData.length > 0){
              for(let i = 0;i< resultData.length;i++){
                const newA = {},newB = [];
                newA.title = resultData[i].title;
                newB.push({
                  "label" : "计划完成率",
                  "value": resultData[i].planValue +'%'
                },{
                  "label" : "累积取水量(万m³)",
                  "value": resultData[i].rate
                },{
                  "label" : "计划取水量(万m³)",
                  "value": resultData[i].value
                })
                newA.data = newB;
                console.log(newB)
                console.log(newA)
                newArray.push(newA)
              }
              console.log(newArray)
              this.indicator = newArray
          }else{
            
          }

      })
    },
    data() {
      return {
        month: ["2018-12-31T16:00:00.000Z", "2019-05-31T16:00:00.000Z"],
        isShow: [],
        indicator:null,
        tableData: [
          {
            date: '新桥水库',
            ypass: '132',
            ynpass: '3',
            npass: '3',
            nnpass: '1',
          }, {
            date: '东郊水厂',
            ypass: '154',
            ynpass: '0',
            npass: '4',
            nnpass: '0',
          }, {
            date: '北郊水厂',
            ypass: '155',
            ynpass: '0',
            npass: '4',
            nnpass: '0',
          }, {
            date: '送水管网',
            ypass: '147',
            ynpass: '8',
            npass: '4',
            nnpass: '0',
          }
        ],
        echartsList: [{
          title: '销售回收率汇总',
          data: {
            title: '',
            legend:{
              data:['2019售水额', '2018售水额', '2019销售回收率', '2018销售回收率']
            } ,
            xAxis: [
              {
                type: 'category',
                axisTick: {
                  alignWithLabel: true
                },
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
              }
            ],
            grid: {
              top: '12%',
              left: '2%',
              right: '2%',
              bottom: '0',
              containLabel: true
            },
            yAxis: [
              {
                type: 'value',
                name: '售水额(万元)',
                min: 50,
                max: 10,
                position: 'left',
                axisLabel: {
                  formatter: '{value} '
                }
              },
              {
                type: 'value',
                name: '回收率(%)',
                min: 70,
                max: 100,
                position: 'right',
                axisLabel: {
                  formatter: '{value}'
                }
              }
            ],
            series: [
              {
                name: '2019售水额',
                type: 'bar',
                data: [29.81, 30.24, 34.26, 37.30],
              },
              {
                name: '2018售水额',
                type: 'bar',
                data: [33.30, 30.30, 36.21, 21.08, 25.82, 36.42, 38.41, 39.15, 29.58, 30.29, 34.87, 35.43]
              },
              {
                name: '2019销售回收率',
                type: 'line',
                yAxisIndex: 1,
                data: [93.52, 92.48, 93.62, 95.70],
                lineStyle: {
                  width: 4
                }
              },
              {
                name: '2018销售回收率',
                type: 'line',
                lineStyle: {
                  width: 4
                },
                yAxisIndex: 1,
                data: [95.70, 95.70, 92.47, 91.57, 94.67, 93.41, 91.79, 94.38, 93.18, 93.30, 95.03, 95.97]
              }
            ]
          }
        },
          {
            title: '客服受理汇总',
            data: {
              grid: {
                top: '2%',
                left: '2%',
                right: '2%',
                bottom: '0',
                containLabel: true
              },
              xAxis: {
                type: 'value',
                axisLabel: {
                  formatter: '{value}'
                }
              },
              yAxis: {
                type: 'category',
                inverse: true,
                data: ['热线电话', '营业大厅', '电子邮件'],
                axisLabel: {
                  formatter: function (value) {
                    return '{value|' + value + '}';
                  },
                  margin: 20,
                  rich: {
                    value: {
                      lineHeight: 30,
                      fontSize: 16,
                      align: 'center',
                      color: '#fff',
                    }
                  }
                }
              },
              series: [
                {
                  name: '受理总量',
                  type: 'bar',
                  label: {
                    normal: {
                      show: true,
                      textBorderColor: '#000',
                      textBorderWidth: 1,
                      formatter: function (value) {
                        return value.data + '条'
                      },
                    }
                  },
                  data: [1165, 670, 130],
                },
                {
                  name: '已处理量',
                  type: 'bar',
                  label: {
                    normal: {
                      show: true,
                      textBorderColor: '#000',
                      textBorderWidth: 1,
                      formatter: function (value) {
                        return value.data + '条'
                      },
                    }
                  },
                  data: [850, 478, 110]
                },
                {
                  name: '未处理量',
                  type: 'bar',
                  label: {
                    normal: {
                      show: true,
                      textBorderColor: '#000',
                      textBorderWidth: 1,
                      formatter: function (value) {
                        return value.data + '条'
                      },
                    }
                  },
                  data: [220, 82, 63]
                }
              ]
            }
          },
          {
            title: '设备运行正常率',
            grid: {
              top: '2%',
              left: '2%',
              right: '2%',
              bottom: '0',
              containLabel: true
            },
            data: {
              radar: {
                radius: '80%',
                center: ['50%', '47%'],
                indicator: [
                  { name: '加压泵站', max: 100, min: 70 },
                  { name: '取水泵站', max: 100, min: 50 },
                  { name: '在线仪器', max: 100, min: 55 },
                  { name: '远传水表', max: 100, min: 85 },
                  { name: '管网设备', max: 100, min: 70 },
                  { name: '其他设备', max: 100, min: 60 }
                ]
              },
              series: [{
                name: '设备正常率',
                type: 'radar',
                lineStyle:{
                  width: 4,
                  color:{
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: 'red' // 0% 处的颜色
                    }, {
                      offset: 1, color: 'blue' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  }
                },
                label: {
                  show: true,
                  formatter: (obj) => {
                    return obj.value + '%'
                  }
                },
                data: [
                  {
                    value: [96.58, 78.29, 87.44, 93.29, 90.15, 88.29],
                    name: '设备正常率'
                  }
                ]
              }]
            }
          }],
        bottomList: [
          {
            value: 39.69,
            max: 100,
            min: 0,
            dw: '%',
            lineStyleColor: [[.7, '#33ff33'], [1, '#dd1e1e']]
          },
          {
            value: 0,
            max: 1.4,
            min: 0,
            dw: '元/m³',
            lineStyleColor: [[0.6, '#33ff33'], [1, '#dd1e1e']]
          }
        ],
      }
    },
    methods: {
      getData(){
        overview2().then(res=>{
          console.log(res + "2222")
          // 处理拿到的数据
        })
      },
      selTime() {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
        }, 800);
      },
      show(e, index) {
        console.log(e, index)
        const th = this
        function todo(isShow) {
          th.$set(th.isShow,index,isShow)
          console.log(th.isShow)
        }

        if (e === 'open' && th.isShow[index] === true) {
          return
        }
        todo(e === 'open')
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .map {
    position: absolute;
    top: .5rem;
    left: calc(26vw + .5rem);
    right: calc(26vw + .5rem);
    bottom: calc(23% + .5rem);
    overflow: hidden;
    background: url("./img/pic_Map_main.png") no-repeat center;
    background-size: auto 110%;
    span{
      font-size: 1.3em;
      margin: 0 5px;
    }
    .list {
      position: absolute;
      background: rgba(0, 0, 0, .1);
      font-size: .8rem;
      padding: .5rem 1.5rem .5rem 2rem;
      line-height: 1.3;
      .title {
        line-height: 1.4;
        margin-bottom: .2rem;
        font-size: 1rem;
        color: #00ccff;
        &:before {
          content: '';
          position: absolute;
          width: 16px;
          height: 16px;
          border-radius: 100%;
          border: 2px solid #cc66ff;
          background: #6600cc;
          top: calc(1.2rem - 8px);
          left: .7rem;
        }
        &.title-2:before {
          content: '';
          position: absolute;
          width: 16px;
          height: 16px;
          border-radius: 100%;
          border: 2px solid #ff3333;
          background: #663300;
          top: calc(1.2rem - 8px);
          left: .7rem;
        }
      }
      .color {
        color: #00ccff;
      }
      i, b {
        width: 1px;
        height: 20px;
        position: absolute;
        background: #00ccff;
        &.l {
          left: 0;
        }
        &.t {
          top: 0;
        }
        &.r {
          right: 0;
        }
        &.b {
          bottom: 0;
        }
      }
      b {
        height: 1px;
        width: 20px;
      }
    }
  }
  .home-echarts-bar-box{
    position: absolute;
    width: 26vw;
    right: .5rem;
    top: .5rem;
    bottom: .5rem;
    overflow-x: auto;
    .home-echarts-bar {
      cursor: pointer;
      z-index: 2;
      height: 28vh;
      position: relative;
      margin-bottom: 1rem;
      .dash-box{
        height: 100%;
        .title {
          height: 2rem;
          text-align: center;
          line-height: 2rem;
        }
        .echart {
          height: calc(100% - 2rem);
          padding: .5rem;
          &-inner {
            height: 235.714%;
            width: 230.77%;
            transform: scale(.433333, .42424242);
            transform-origin: 0 0;
          }
        }
        &.on {
          position: fixed;
          top: 15vh;
          transform: none !important;
          width: 60vw;
          height: 66vh;
          right: 50%;
          margin-bottom: -27vh;
          margin-right: -30vw;
          border-radius: 2px;
          border: 2px solid rgba(27, 164, 226, 0.85);
          background: rgba(24, 10, 67, 0.95);
          z-index: 4;
          &:before {
            opacity: 0;
            transition: opacity .3s;
          }
          .mask {
            display: block;
          }
          .title {
            height: 4rem;
            line-height: 4rem;
            font-size: 1.5rem;
          }
          transform: none !important;
          width: 60vw;
          height: 66vh;
          .echart {
            &-inner {
              height: 100%;
              width: 100%;
              transform: none;
            }
          }
        }
        .mask {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          background: rgba(0, 0, 0, .1);
          z-index: -1;
        }
      }
      .el-icon-circle-close-outline {
        position: absolute;
        top: -16px;
        right: -16px;
        font-size: 24px;
        width: 32px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        color: #dddddd;
        &:hover {
          color: #fff;
        }
        &:after {
          content: '';
          position: absolute;
          width: 20px;
          height: 20px;
          border-radius: 100%;
          background: rgba(24, 10, 67, 0.95);
          top: 6px;
          left: 6px;
          z-index: -1;
        }
      }

    }

  }

  .echarts-item {
    &-0 {
      bottom: calc(66% + .5rem + 5vh);
    }
    &-1 {
      bottom: calc(33% + .5rem + 2.5vh);

    }
    &-2 {
      bottom: .5rem;
    }
  }

  .indicator {
    position: absolute;
    left: .5rem;
    top: -1.5rem;
    width: 26vw;
    height: 65%;
    &-title {
      display: flex;
      span {
        font-size: 1rem;
        line-height: 1.2rem;
        padding: .5rem 1.5rem .5rem .5rem;
        background: url("./img/Icon_Irregularrectangle_head.png") no-repeat center left;
        background-size: 100% 100%;
      }
    }
    .value-0 {
      color: #ff33ff;
    }
    .value-1 {
      color: #33ff33;
    }
    .value-2 {
      color: #ffcc33;
    }
    &-month {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem .5rem;
      .month {
        width: calc(50% - 50px);
      }
    }
    &-main {
      height: calc(100% - 7rem);
      > div {
        height: 25%;
        padding-top: .3rem;
        position: relative;
        .title {
          font-size: .825rem;
          height: 25%;
          display: flex;
          align-items: center;
          color: #00ffff;
          padding-left: .8rem;
        }
        .main {
          height: 70%;
          display: flex;
          align-items: center;
          padding: .3rem 0;
          li {
            height: 100%;
            width: calc(100% / 3 - .666667px);
            position: relative;
            margin-left: 1px;
            &:after {
              content: '';
              display: block;
              position: absolute;
              width: 1px;
              top: 20%;
              right: -1px;
              height: 60%;
              background: #00beea;
            }
            &:last-child:after {
              content: none;
            }
            .label {
              height: 45%;
              display: flex;
              justify-content: center;
              font-size: .75rem;
            }
            .value {
              height: 65%;
              display: flex;
              justify-content: center;
              font-size: 1.5rem;
            }
          }
        }
        &:after {
          content: '';
          display: block;
          height: 1px;
          width: 84%;
          position: absolute;
          background: #00ccff;
          left: 8%;
          bottom: -1px;
        }
        &:last-child:after {
          content: none;
        }
      }
    }

  }

  .quality {
    position: absolute;
    left: .5rem;
    bottom: .5rem;
    width: 26vw;
    height: 36%;
    &-title {
      font-size: 1rem;
      line-height: 2.4rem;
      padding-left: .5rem;
      background: #192790;
    }
    &-main {
      width: 133.3333%;
      transform: scale(.75, .75);
      height: calc(133.3333% - 3.4rem);
      transform-origin: 0 0;
    }
  }

  .marketing {
    padding: 1rem;
    position: absolute;
    left: 28.5%;
    bottom: .5rem;
    width: 43%;
    height: 23%;
    display: flex;
    .marketing-item {
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .left {
        margin-right: .5rem;
        width: 14vh;
        height: 100%;
      }
      .right{
        padding-bottom: 1.2rem;
      }
    }
  }

  .dash-box {
    border: 1.2px solid #00ccff;
    background: rgba(0, 0, 255, .15);
    box-shadow: 0 0 .5rem #1800ff;
  }

  .echarts-item {
    height: 100%;
    .echarts-title {
      text-align: center;
      font-size: 1.3rem;
      height: 2.6rem;
      line-height: 1.8rem;
    }
  }

  .topList {
    display: flex;
    li {
      width: 33.33%;
      color: #00ccff;
      font-size: 1.1rem;
      span {
        font-size: 1.3rem;
        color: #33ff33;

      }
      &:last-child span {
        color: #ffcc33;
      }
      &:first-child span {
        color: #ff33ff;
      }

    }
  }

</style>
<style rel="stylesheet/scss" lang="scss">
  .month {
    .el-input__inner {
      padding-right: 0 !important;
    }
  }

  .el-table thead.is-group th, .el-table, .el-table__expanded-cell, .el-table th, .el-table tr {
    background: transparent;

  }

  .el-table, .el-table thead {
    font-size: 1.2rem;
    color: #fff;
    text-align: center;
  }

  .el-table thead {
    color: #e78a20;
    text-align: center;
  }

  .el-table .cell {
    text-align: center;
  }

  .el-table--enable-row-hover .el-table__body tr:hover > td {
    background: rgba(255, 255, 255, .15);
  }

  .el-progress--circle .el-progress__text {
    font-size: 2rem !important;
    color: #ff33ff;
  }
</style>
